<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <body>
        <ui:composition template="./templates/basetemplate.xhtml">
            <ui:define name="content">
                <div class="taskcontainer">
                    <div><h1>To-do List</h1></div>
                    <div class="tasklist">
                        <h:form >
                            <h:dataTable 
                                         styleClass="task-table"
                                         headerClass="task-table-table-header"
                                         rowClasses="task-table-even-row,task-table-odd-row"
                                         >
                                <h:column>
                                    <f:facet name="header"></f:facet>
                                    <h:selectBooleanCheckbox />
                                </h:column>
                                <h:column>
                                    <f:facet name="header">Title</f:facet>
                                    <h:link id="title" onclick="dlg.show()" ><h:outputText /></h:link>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">Start Date</f:facet>
                                    <h:outputText />
                                </h:column>
                                <h:column>
                                    <f:facet name="header">Due Date</f:facet>
                                    <h:outputText />
                                </h:column>
                                <h:column>
                                    <f:facet name="header">Action</f:facet>

                                    <h:link id="edit" >
                                        <h:graphicImage style="margin-right: 6px;" value="/resources/default/images/edit.png" />
                                    </h:link>
                                    <p:tooltip for="edit" value="Click to edit task" showEffect="slide" hideEffect="slide" />

                                    <h:commandLink id="delete" >
                                        <h:graphicImage style="margin-right: 6px;" value="/resources/default/images/delete.png" />
                                    </h:commandLink>
                                    <p:tooltip for="delete" value="Click to delete task" showEffect="slide" hideEffect="slide" />

                                    <h:commandLink id="send" >
                                        <h:graphicImage style="" value="/resources/default/images/send.png" />         
                                    </h:commandLink>
                                    <p:tooltip for="send" value="Send by E-Mail" showEffect="slide" hideEffect="slide" />
                                </h:column>

                            </h:dataTable>
                        </h:form>
                    </div>

              
                    
     <!-- Create task form -->
                  <h:form id="taskform" rendered="true" >

                        <ul >
                            <div class="input1">
                                <div>
                                    <li>
                                        <h:outputLabel for="title" value="Title"/>
                                    </li>
                                    <li>
                                        <p:inputText id="title" value="#{todoHandler.title}" />
                                    </li>
                                </div>   
                                <div style="margin-top:5px;  " >
                                    <li>
                                        <h:outputLabel for="description" value="Description"/>
                                    </li>
                                    <li>
                                        <p:inputTextarea id="description" value="#{todoHandler.description}" />
                                    </li>    
                                </div>

                            </div>
                            <div style="margin-top: 110px; " id="pickdate" >
                                <div class="left">
                                    <li>
                                        <h:outputLabel for="startdate" value="Start Date"/>

                                        <div>
                                            <p:calendar id="startdate" value="#{todoHandler.startDate}" />
                                        </div>
                                    </li>
                                </div>
                                <div class="right">
                                    <li>
                                        <h:outputLabel for="startdate" value="Due Date"/>

                                        <div>
                                            <p:calendar id="duedate" value="#{todoHandler.dueDate}"/>
                                        </div>
                                    </li>
                                </div>
                            </div>
                            <div id="remind">
                                <li>
                                    <h:outputLabel value="Remind me"/>
                                    <div >
                                        <table border="" >
                                            <tr >
                                                <td>At <p:calendar  pattern="HH:mm a" timeOnly="true"  value="#{todoHandler.remindTime}"/> </td>
                                                <td width="80" align="left">Via: </td>
                                               
                                            </tr>
                                            <tr align="">
                                                <td >On<p:calendar id="reminddate" value="#{todoHandler.remindDate}"/></td> 
                                                
                                                <td style="width:200px;">
                                                    <h:selectManyCheckbox style="margin-top:-15px;" value="#{todoHandler.remindVia}">
                                                        <f:selectItem itemLabel="E-Mail" itemValue="email"/><br/>
                                                        <f:selectItem itemLabel="SMS" itemValue="sms"/>
                                                    </h:selectManyCheckbox>
                                                </td>
                                            </tr>
                                        </table>

                                    </div>
                                </li>
                            </div>
                            <div class="button">
                                <li><h:commandButton value="Save" action="#{todoHandler.saveToDo()}"/> <button type="Cancel" value="">Cancel</button></li>
                            </div>
                        </ul>
                    </h:form>
                </div>
            </ui:define>
        </ui:composition>
    </body>
</html>
